<%-- 
  -- Body New para Course.
  --
  -- @author ariel.piechotka
--%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<%@ taglib uri="/WEB-INF/struts-html-el-1.2.8.tld" prefix="html-el"%>
<%@ taglib uri="/WEB-INF/struts-logic-el-1.2.8.tld" prefix="logic-el"%>
<%@ taglib uri="/WEB-INF/security.tld" prefix="security" %>

<%@ taglib uri="http://struts.apache.org/tags-bean-el" prefix="bean2"%>

<div class="errors">
    <html:errors />
</div>

<link rel="stylesheet" type="text/css" href="<html:rewrite page='/protected/style/dragdrop.css'/>" id="styleFile"/>

<%-- prototype esta en el main layout --%>
<script src="<html:rewrite page='/protected/script/scriptaculous/scriptaculous.js'/>" type="text/javascript"></script>

<script src="<html:rewrite page='/protected/script/util.js'/>" type="text/javascript"></script>

<%-- Para EXT --%>
<link rel="stylesheet" type="text/css" href="<html:rewrite page='/protected/script/ext-1.1.1/resources/css/ext-all.css'/>" />

<script src="<html:rewrite page='/protected/script/ext-1.1.1/adapter/ext/ext-base.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/ext-1.1.1/ext-all.js'/>" type="text/javascript"></script>

<script src="<html:rewrite page='/protected/script/calendar/calendar.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/calendar/calendar-setup.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/calendar/lang/calendar-es.js'/>" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="<html:rewrite page='/protected/script/calendar/style/calendar-blue.css'/>" id="styleFileAnyId"/>



<div class="errors">
    <html:errors />
</div>


<script type="text/javascript">
    /** Crea un curso */
    function createCourse() {

        var ul = $('actualSubjects');
        var lisCollection = ul.getElementsByTagName('li');
        var chosen = "";
        for (var i = 0; i < lisCollection.length; i++) {
            var elem = lisCollection[i];
            
            chosen += elem.id;
            if (i != (lisCollection.length - 1)) {
                // Para evitar ponerlo en el ultimo...
                chosen += ";";
            }
        }    

        var codeValue = $("codeId").value;
        var nameValue = $("nameId").value;
        var bodyValue = $("bodyId").value;
        var curriculumValue = $("curriculumId").value;
        var certificateValue = $("certificateId").value;
        var courseTypeValue = $("courseTypeId").value;
        var resolutionValue = $("resolutionId").value;
        var fileNumberValue = $("fileNumberId").value;
        var firstDueDateValue = $("firstDueDateId").value;

        if (Util.valid.isBlank(codeValue)) {
            Ext.MessageBox.alert('Error', 'Debe ingresar el c&oacute;digo. ');
            $("codeId").focus();
            return;
        }
        if (Util.valid.isBlank(nameValue)) {
            Ext.MessageBox.alert('Error', 'Debe ingresar el nombre. ');
            $("nameId").focus();
            return;
        }
        if (Util.valid.isBlank(bodyValue)) {
            Ext.MessageBox.alert('Error', 'Debe ingresar el ente. ');
            $("bodyId").focus();
            return;
        }
        if (Util.valid.isBlank(curriculumValue)) {
            Ext.MessageBox.alert('Error', 'Debe ingresar la curr&iacute;cula. ');
            $("curriculumId").focus();
            return;
        }
        if (Util.valid.isBlank(firstDueDateValue)) {
            Ext.MessageBox.alert('Error', 'Debe ingresar la fecha de vencimiento de la primera cuota. ');
            $("firstDueDateId").focus();
            return;
        }
        
        var chosenObj = $("createChosenSubjectsId");
        var codeObj = $("codeConfirmId");
        var nameObj = $("nameConfirmId");
        var bodyObj = $("bodyConfirmId");
        var curriculumObj = $("curriculumConfirmId");
        var certificateObj = $("certificateConfirmId");
        var courseTypeObj = $("courseTypeConfirmId");
        var resolutionObj = $("resolutionConfirmId");
        var fileNumberObj = $("fileNumberConfirmId");
        var firstDueDateObj = $("firstDueDateConfirmId");
        
        chosenObj.value = chosen;
        codeObj.value = codeValue;
        nameObj.value = nameValue;
        bodyObj.value = bodyValue;
        curriculumObj.value = curriculumValue;
        certificateObj.value = certificateValue;
        courseTypeObj.value = courseTypeValue;
        resolutionObj.value = resolutionValue;
        fileNumberObj.value = fileNumberValue;
        firstDueDateObj.value = firstDueDateValue;
        
        var form = $("createCourseFormId");
        form.submit();
    } 
    
</script>

<%-- El ID del form NO debe ser modificado. Se usa desde el menu --%>
<html:form action="/protected/showNewCourse" styleId="courseFormId">

    <h2>Creaci&oacute;n de curso</h2>
    
    <div class="courseEdit">
        <table class="tableData" cellspacing="0">
            <tr>
                <td class="tableDataTitle">
                    Nombre*
                </td>
                <td class="tableDataValue">
                    <html:text property="name" styleId="nameId" alt="Nombre del curso" maxlength="100" size="50"/>
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    C&oacute;digo*
                </td>
                <td class="tableDataValue">
                    <html:text property="code" styleId="codeId" alt="Codigo del curso" maxlength="10"/>
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Ente*
                </td>
                <td class="tableDataValue">
                    <html:select property="idBody" styleClass="allSelects" styleId="bodyId" >
                        <html:optionsCollection property="bodyOptions"/>
                    </html:select>
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Curr&iacute;cula*
                </td>
                <td class="tableDataValue">
                    <html:textarea property="curriculum" styleId="curriculumId" alt="Plan del curso" cols="50" rows="11"/>
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Vencimiento de la primera cuota*
                </td>
                <td class="tableDataValue">
                    <html:text property="firstDueDate" styleId="firstDueDateId" readonly="true"/>
                    &nbsp;
                    <img id="dateImgId" style="border: 0px;" title="title" src="<html:rewrite page="/protected/img/date.png"/>" title="Seleccione una fecha"/>
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Certificado
                </td>
                <td class="tableDataValue">
                    <html:textarea property="certificate" styleId="certificateId" alt="Certificado otorgado" />
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Tipo
                </td>
                <td class="tableDataValue">
                   	<html:select property="courseTypeSelected" styleClass="allSelects" styleId="courseTypeId">
                        <html:optionsCollection property="courseTypeCollection"/>
                    </html:select>
                </td>
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Resoluci&oacute;n
                </td>
                <td class="tableDataValue">
                    <html:text property="newResolution.resolutionNumber" styleId="resolutionId" alt="Numero de resolucion" maxlength="20"/>
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Expediente
                </td>
                <td class="tableDataValue">
                    <html:text property="newResolution.fileNumber" styleId="fileNumberId" alt="Numero de expediente" maxlength="20"/>
                </td>            
            </tr>
        </table>
        
        <br/>
        <div id="clear"></div>
    	<p class="mensajeCamposObligatorios">Los campos marcados con un asterisco (*) son obligatorios.</p>
    	<div id="clear"></div>

        <div id="clear">
        </div>
        
        <bean:define id="actualSubjects" name="courseForm" property="actualSubjects" />
        <bean:define id="availableSubjects" name="courseForm" property="availableSubjects" />

        <h3>Materias</h3>
        <div class="panelBody">
            <h3 class="panelTitle">Actuales</h3>

            <ul style="position: relative; font-weight: bold;" class="sortableList boxy_fw scrollable" id="actualSubjects">
                <logic-el:iterate id="subject" name="actualSubjects">
                    <li id='<bean:write name="subject" property="id"/>' title='<bean:write name="subject" property="name"/>' style="position: relative;" class="listElement">           
                        <bean:write name="subject" property="name"/>
                    </li>
                </logic-el:iterate>
            </ul>
        </div>        

        <div class="panelBody">
            <h3 class="panelTitle">Disponibles</h3>

            <ul style="position: relative;" class="sortableList boxy_fw scrollable" id="availableSubjects">
                <logic-el:iterate id="subject" name="availableSubjects">
                    <li id='<bean:write name="subject" property="id"/>' title='<bean:write name="subject" property="name"/>' style="position: relative;" class="listElement">           
                        <bean:write name="subject" property="name"/>
                    </li>
                </logic-el:iterate>
            </ul>
        </div>        

        <%-- No se valida seguridad ya que SOLO entran aca los administradores --%>
        <script type="text/javascript">
            Sortable.create("actualSubjects",{dropOnEmpty:true,containment:["actualSubjects","availableSubjects"],constraint:false});
            Sortable.create("availableSubjects",{dropOnEmpty:true,handle:'handle',containment:["actualSubjects","availableSubjects"],constraint:false});
        </script>

        
        <div id="clear">
        </div>
        <div id="clear">
        </div>
        
        <%-- No se valida seguridad ya que SOLO entran aca los q tienen permiso --%>
        <div class="panelButton">
            <input type="button" value="Guardar" onclick="createCourse();" title="Guarda el curso..." class="button">
        </div>  
    
        <script type="text/javascript">
            Calendar.setup({
              inputField    : "firstDueDateId",
              button        : "dateImgId",
              align         : "Tr",
              ifFormat      : "%d/%m/%Y"
            });
        </script>

    </div>

</html:form>

<%-- Inyectados por Javascript --%>
<div id="createDivId" class="hideClass">
    <html:form action="/protected/createCourse" styleId="createCourseFormId">
        <html:hidden property="chosenSubjects" value="" styleId="createChosenSubjectsId" />
        <html:hidden property="code" value="" styleId="codeConfirmId" />
        <html:hidden property="name" value="" styleId="nameConfirmId" />
        <html:hidden property="idBody" value="" styleId="bodyConfirmId" />
        <html:hidden property="curriculum" value="" styleId="curriculumConfirmId" />
        <html:hidden property="certificate" value="" styleId="certificateConfirmId" />
        <html:hidden property="courseType" value="" styleId="courseTypeConfirmId" />
        <html:hidden property="resolution" value="" styleId="resolutionConfirmId" />
        <html:hidden property="fileNumber" value="" styleId="fileNumberConfirmId" />
        <html:hidden property="firstDueDate" value="" styleId="firstDueDateConfirmId" />
    </html:form>
</div>
